<template>
  <div class="app-container wmin-datail-box">
    <!-- 搜索数据 -->
    <el-form :inline="true" class="top-box" label-width="68px" style="margin-bottom: 15px;">
      <el-form-item label="物料编码">
        <el-input v-model="searchForm.searchCode" clearable  size="small" style="width: 240px" />
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input v-model="searchForm.searchName" clearable size="small" style="width: 240px" />
      </el-form-item>
      <el-date-picker class="input-data" type="date" placeholder="开始日期" v-model="searchForm.startDate"
        @change="searchListStart"></el-date-picker>
      <el-date-picker class="input-data" type="date" placeholder="结束日期" v-model="searchForm.endDate"
        @change="searchListEnd"></el-date-picker>
      <el-form-item>
        <el-button type="primary" v-hasPermi="['wm:report:checkout:query']" icon="el-icon-search" @click="searchList">搜索
        </el-button>
        <el-button icon="el-icon-refresh" v-hasPermi="['wm:report:checkout:query']" @click="serchReset()">重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8 operation-btn">
      <el-col :span="1.5">
        <el-button type="primary" v-hasPermi="['wm:report:checkout:query']" plain icon="el-icon-menu" size="mini" @click="checkleAll">查询所有</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-select v-model="selectwarehouse" placeholder="仓库" @change="warehouseChange">
          <el-option v-for="item in optionswarehouse" :key="item.uniqueId" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" v-hasPermi="['wm:report:checkout:export']" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" v-hasPermi="['wm:report:checkout:print']" plain icon="el-icon-printer" size="mini" @click="handlePrint">打印</el-button>
      </el-col>
    </el-row>
    <!-- 打印数据 -->
    <PrintPage v-if="printStatus" :wmSort="wmSort" :pathQuery="pathQuery" :printData="printData"
      :locationStatus="locationStatus" :priceStatus="priceStatus" ref="startPrint" :title="printName" />
    <!-- 物料数据 -->
    <el-table v-loading="materialloading" ref="tableData" :data="basicfileList" border :height="maxHeight"
      @row-dblclick="handleView" :row-class-name="tableRowClassName">
      <el-table-column type="index" width="60" align="center" label="序号" :key="1">
      </el-table-column>
      <el-table-column label="单据编码" align="center" prop="wmCode" width="180">
        <template v-slot="newsData">
          <span class="red-scarlet">{{newsData.row.wmCode}}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务类型" align="center" prop="workType">
      </el-table-column>
      <el-table-column label="业务部门" align="center" prop="workDept">
      </el-table-column>
      <el-table-column label="业务人员" align="center" prop="workStaff" width="80">
      </el-table-column>
      <el-table-column label="销售客户" align="center" prop="customer" v-if="$route.query.workType=='0'" width="200">
      </el-table-column>
      <el-table-column label="加工设备" align="center" prop="productionLine" v-if="$route.query.workType=='1'">
      </el-table-column>
      <el-table-column label="外协厂家" align="center" prop="outsource" v-if="$route.query.workType=='2'" width="200">
      </el-table-column>
      <el-table-column label="物料名称" align="center" prop="invName" :key="3" width="180">
        <template slot-scope="scope">
          <div v-if="wmSort.sortAttrMerge==1">
            <span>{{scope.row.invName}}</span>
            <span>{{scope.row.invAttribute}}</span>
          </div>
          <div v-if="wmSort.sortAttrMerge==0">
            <span>{{scope.row.invName}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="wmSort.sortAttrAlia" align="center" v-if="wmSort.sortAttrMerge!==1" prop="invAttribute"
        :key="4" />
      <el-table-column label="主计量" align="center" prop="unitName" width="75" />
      <el-table-column label="属性" align="center" prop="attribute">
      </el-table-column>
      <el-table-column label="批次日期" align="center" prop="batchDate" width="180" :key="12" />
      <el-table-column label="出库数量" align="center" prop="outQuantity">
        <template slot-scope="scope">
          <div style="text-align: right;">
            <span>{{scope.row.outQuantity}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="货位" v-if="locationStatus" align="center" prop="location" width="100" />
    </el-table>
    <!-- 分类查询分页信息 -->
    <pagination v-show="total>=19" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getWmList" />
  </div>
</template>

<script>
  import {
    listWarehouses,
    checkWarehouses,
    exportWmOut,
    checkWarehouse,
    listWmOut
  } from "../../api/report"; //物料接口
  import PrintPage from "../../components/Reporrt/Checkout/print"; //打印组件
  import print from "print-js"; //打印js
  export default {
     name:"Checkout/customer"||"Checkout/production"||"Checkout/outsource"||"Checkout/other",
    data() {
      return {
        // 遮罩层
        loading: true,
        //物料信息遮罩
        materialloading: true,
        // 仓库查询参数
        warehouseQuery: {
          invoiceType: "",
          bredVouch: "",
          workType: ""
        },
        //仓库选择
        optionswarehouse: [],
        selectwarehouse: "",
        selectwhname: "",
        //仓库对应物料分类信息
        wmSort: {
          sortPrice: "2", //价格小数位数
          sortQuantity: "2", //数量小数位数
          sortAttrAlia: "型号规格", //别名
          sortAttrMerge: 0, //规格合并
        },
        //物料数据最大高度
        maxHeight: null,
        //搜索参数
        searchForm: {
          searchName: "", //搜索物料名称
          searchCode: "", //搜索物料编码
          startDate: "",
          endDate: ""
        },
        // 现存量查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 100,
          invName: "",
          invCode: "",
          warehouse: "", //仓库代码
          invoiceType: "",
          bredVouch: "",
          workType: "",
          startDate: "",
          endDate: ""
        },
        // 总条数
        total: 0,
        //单价状态
        priceStatus: true,
        //货位显示状态 是否启用货位
        locationStatus: true,
        //物料数据
        basicfileList: [],
        //打印名称
        printName: "",
        printTypeName: "",
        //打印组件状态
        printStatus: false,
        //打印数据
        printData: [],
        rules: {

        }
      }

    },
    created() {
      //赋值路由参数
      this.pathQuery = this.$route.query;
      // 仓库查询
      this.warehouseQuery = {
        invoiceType: this.pathQuery.invoiceType,
        bredVouch: this.pathQuery.bredVouch,
        workType: this.pathQuery.workType
      };
      // 入库单据查询参数
      this.queryParams = {
        invoiceType: this.pathQuery.invoiceType,
        bredVouch: this.pathQuery.bredVouch,
        workType: this.pathQuery.workType
      };
      this.searchForm.startDate = this.parseTime(new Date(this.timeMounceDay(new Date())));
      this.searchForm.endDate = this.parseTime(new Date());
      this.getHouselList()
    },
    methods: {
      //仓库列表
      getHouselList() {
        listWarehouses(this.warehouseQuery).then(res => {
          if (res.code == 200) {
            this.optionswarehouse = res.rows;
            if (this.optionswarehouse.length > 0) {
              this.warehouseChange(this.optionswarehouse[0].code);
              this.selectwarehouse = this.optionswarehouse[0].code;
            } else {
              this.loading = false;
            }
          }
        })
      },

      // 仓库选择
      warehouseChange(code) {
        checkWarehouses(code).then(res => {
          // 清空入库单据搜索
          this.searchForm.searchCode = "";
          this.searchForm.searchName = "";
          this.queryParams.warehouse = code;
          let wmObj = {};
          wmObj = this.optionswarehouse.find(item => {
            return item.code == code;
          })
          this.selectwhname = wmObj.name;
          //物料分类下单价小数点位数
          this.wmSort.sortPrice = res.data.invSorts[0].priceDigit;
          //物料分类下数量小数点位数
          this.wmSort.sortQuantity = res.data.invSorts[0].quantityDigit;
          //物料分类下规格别名
          this.wmSort.sortAttrAlia = res.data.invSorts[0].attrAlias || "型号规格";
          //物料分类下规格合并
          this.wmSort.sortAttrMerge = res.data.invSorts[0].attrMerge;
          // 单价状态
          if (res.data.invSorts[0].nonePrice == "0") {
            this.priceStatus = true;
          } else {
            this.priceStatus = false;
          }
          if (res.data.enableLocation == 1) {
            this.locationStatus = true;
          } else {
            this.locationStatus = false;
          }
          this.decimal = res.data.invSorts[0].quantityDigit;
          this.getWmList()
        })

      },

      //入库列表
      getWmList() {
        this.materialloading = true;
        // 日期转换
        if (this.searchForm.startDate !== "" && this.searchForm.startDate !== null && this.searchForm.startDate !==
          undefined) {
          this.queryParams.startDate = this.searchForm.startDate;
        } else {
          this.queryParams.startDate = ""
        }
        if (this.searchForm.endDate !== "" && this.searchForm.endDate !== null && this.searchForm.endDate !==
          undefined) {
          this.queryParams.endDate = this.searchForm.endDate;
        } else {
          this.queryParams.endDate = ""
        }
        // console.log(this.queryParams.startDate)
        // console.log(this.queryParams.endDate)
        listWmOut(this.queryParams).then(res => {
          if (res.code == 200) {
            const list = JSON.parse(JSON.stringify(res.rows));
            list.forEach(obj => {
              obj.outQuantity = obj.outQuantity.toFixed(this.wmSort.sortQuantity)

            })
            this.basicfileList = list;
            this.total = res.total;
            if (this.basicfileList.length >= 19 || this.$refs.tableData.offsetHeight > 750) { //条数总数大于显示出现滚动条
              this.maxHeight = (`${document.documentElement.clientHeight}` - 270);
            } else {
              this.maxHeight = null;
            }
            this.materialloading = false;
          }
        })
      },

      //搜索物料开始日期
      searchListStart() {
        // 日期转换
        if (this.searchForm.startDate !== "" && this.searchForm.startDate !== null && this.searchForm.startDate !==
          undefined) {
          this.searchForm.startDate = this.parseTime(this.searchForm.startDate);
        } else {
          this.queryParams.startDate = ""
        }
        this.searchList()
      },

      //搜索物料结束日期
      searchListEnd() {
        if (this.searchForm.endDate !== "" && this.searchForm.endDate !== null && this.searchForm.endDate !==
          undefined) {
          this.searchForm.endDate = this.setTime(this.searchForm.endDate);
        } else {
          this.queryParams.endDate = ""
        }
        this.searchList()
      },

      // 搜索
      searchList() {
        this.queryParams.invName = this.searchForm.searchName; //赋值物料名称
        this.queryParams.invCode = this.searchForm.searchCode; //赋值物料编码
        this.getWmList();
      },

      // 查询所有
      checkleAll() {
        //清空搜索信息，避免干扰
        this.searchForm.searchName = "";
        this.searchForm.searchCode = "";
        this.searchForm.startDate = "";
        this.searchForm.endDate = "";
        this.queryParams.invName = "";
        this.queryParams.invCode = "";
        this.queryParams.startDate = "";
        this.queryParams.endDate = "";
        this.getWmList();
      },

      //导出
      handleExport() {
        if (this.pathQuery.workType == "0") {
          this.printTypeName = "销售";
        } else if (this.pathQuery.workType == "1") {
          this.printTypeName = "生产";
        } else if (this.pathQuery.workType == "2") {
          this.printTypeName = "委外"
        } else if (this.pathQuery.workType == "3") {
          this.printTypeName = "其它"
        }

        let queryParams = this.queryParams;
        this.$confirm(`是否确认导出${this.selectwhname+this.printTypeName}出库明细?`, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportWmOut(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
      },

      // 打印
      handlePrint() {
        if (this.pathQuery.workType == "0") {
          this.printTypeName = "销售";
        } else if (this.pathQuery.workType == "1") {
          this.printTypeName = "生产";
        } else if (this.pathQuery.workType == "2") {
          this.printTypeName = "委外"
        } else if (this.pathQuery.workType == "3") {
          this.printTypeName = "其它"
        }
        let number = 1;
        this.printData = this.basicfileList;
        this.printName = this.selectwhname + this.printTypeName;
        this.printData.forEach(obj => {
          obj.id = number++
        })
        this.printStatus = true;
        setTimeout(() => {
          this.$print(this.$refs.startPrint.$refs.print);
        }, 0)
      },
      // 双击查看物料
      handleView(row) {
        this.$router.push({
          path: `/wm/stock/checkoutview`,
          query: {
            detailCode: row.wmCode,
            open: "seeStatus",
            whCode: this.selectwarehouse,
            bredVouch: this.$route.query.bredVouch,
            invoiceType: this.$route.query.invoiceType,
            workType: this.$route.query.workType
          }
        })
      },
      /* 红字蓝字编码变色 */
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.bredVouch === 1) {
          return 'warning-row';
        }
        return '';
      },

      //时间+23时59分59秒
      setTime(date) {
        date.setHours(date.getHours() + 23);
        date.setMinutes(date.getMinutes() + 59);
        date.setSeconds(date.getSeconds() + 59);
        let time = new Date(date);
        return time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate() + " " + time.getHours() + ":" +
          time.getMinutes() + ":" + time.getSeconds()
      },
      /*获取当月1号 */
      timeMounceDay(date) {
        let time = new Date(date);
        return time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + 1
      },
      //搜索表单重置
      serchReset() {
        for (let key in this.searchForm) {
          this.searchForm[key] = ""
        }
      },
    },

    components: {
      PrintPage
    },

  };
</script>
<style lang="scss">
  .wmin-datail-box {
    .el-table__row {
      cursor: pointer;
      user-select: none;
    }

    .el-select input {
      line-height: 28px;
      height: 28px;
      width: 150px;
    }

    .el-input--medium .el-input__icon {
      line-height: 28px;
    }

    .input-data {
      margin-right: 10px;
      margin-bottom: 5px;
    }

    .top-box {
      display: flex;
      align-items: center;
    }

    .el-table .warning-row {
      .red-scarlet {
        color: #fc6a6a;
      }
    }

    .txt-right {
      input {
        text-align: right;
      }
    }
  }
</style>
